<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>UserManage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../IMG/favicon.ico">
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css" />
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">
  </head>
    <body>
        <!--悬浮按钮-->
        <div class="dangling-box">
            <a id="danglingBack" style="display: none;"><i class="dangling-icon fa fa-arrow-up" aria-hidden="true"></i></a>
        </div>
        <!-- 主体 -->
        <div class="main">
            <div class="page-header">
                <h2 class="page-title">用户信息管理</h2>
                <!-- 操作框 -->
                <div class="oper-box">
                    <button class="btn btn-primary" id="showAddModalBtn">添加用户</button>
                    <div class="search-box input-group col-xs-9">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" id="searchTypeBtn" data-toggle="dropdown">
                                查找方式
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="search-type" onclick="chooseSearchType(this);">工号</a></li>
                                <li><a class="search-type" onclick="chooseSearchType(this);">姓名</a></li>
                                <li><a class="search-type" onclick="chooseSearchType(this);">权限</a></li>
                                <li><a class="search-type" onclick="chooseSearchType(this);">工作部门</a></li>
                                <li><a class="search-type" onclick="chooseSearchType(this);">展示所有</a></li>
                            </ul>
                          </div>
                        <input type="text" class="form-control" id="paramInput" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="searchBtn">查找</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-box table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>电子邮箱</th>
                            <th>权限</th>
                            <th>工作部门</th>
                            <th>上次登录时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- 分页框 -->
            <div class="setPageDiv">
                <ul class="pagination" id="paginationUserInfoList"></ul>
            </div>
        </div>
        <!-- 修改用户信息 -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="UserID">工号</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="UserID" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="NewPrivilege">新权限</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="NewPrivilege">
                                        <option value="初级用户">初级用户</option>
                                        <option value="高级用户">高级用户</option>
                                        <option value="监管员">监管员</option>
                                        <option value="部门经理">部门经理</option>
                                        <option value="系统管理员">系统管理员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary center-block" id="EditBtn">确认修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加用户 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加新用户</h4>
                    </div>
                    <div class="modal-body" id="modal_body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="NewUserUserID">工号</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="NewUserUserID">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="NewUserName">姓名</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="NewUserName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="NewUserPrivilege">权限</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="NewUserPrivilege">
                                        <option value="初级用户">初级用户</option>
                                        <option value="高级用户">高级用户</option>
                                        <option value="监管员">监管员</option>
                                        <option value="部门经理">部门经理</option>
                                        <option value="系统管理员">系统管理员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary center-block" id="AddBtn">确认添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <link href="../CSS/UserManage.css" rel="stylesheet" type="text/css">
        <script src="../node_modules/jqPaginator-2.0.2/dist/jq-paginator.js"></script>
        <script src="../JS/UserManage.js"></script>
    </body>
</html>
